<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子的定位position</title>
  <style>
    *{
      margin: 0;
      padding: 0
    }
    div {
      width: 800px;
      height: 100px;
      background-color: lightyellow;
      border: 1px dashed red;
      text-align: center;
      line-height: 100px;
    }
    /* 1. 盒子的固定定位：以浏览器边框为定位基准（参照物） */
    .d1 {
      position: fixed;
      left: 20px;         /* 代表距离浏览器边框的左边是20px */
      top: 50px;          /* 代表距离浏览器边框的上边是50px */
    }
    /* 2. 盒子的相对定位：以盒子原来应该出现的位置为定位基准(参照物) */
    .d2 {
      position: relative;
      background-color: pink;
      top: 15px;
      left: 20px;
    }
    /*3. 盒子绝对定位：以当前子盒子的父盒子中哪个离它最近并且
         设置了position属性，而position属性不能是static的哪个盒子为定位基准(参照物)*/
    .d3 {
      background-color: lightgreen;
      position: relative;         /* 父盒子相对定位 */
    }
    .d31 {
      background-color: lightyellow;
      border: 1px solid red;
      width: 600px;
      height: 50px;
      line-height: 50px;
      position: absolute;        /* 子盒子绝对定位 */
      top:10px;
      left: 20px;
    }
  </style>
</head>
<body>
  <h2>1. 盒子的固定定位<hr></h2>
  <div class="d1">盒子的固定定位：参照物就是浏览器边框</div>
  <br><br><br><br><br><br><br>
  <h2>2. 盒子的相对定位<hr></h2>
  <div class="d2">盒子的相对定位：参照物是盒子本身原来应该出现的位置</div>
  <br><br>
  <h2>3. 盒子的绝对定位<hr></h2>
  <div class="d3">
    <div class="d31">
      盒子的绝对定位：以离它最后的哪个设置了position属性的盒子为参照物(子绝父相)
    </div>
  </div>
</body>
</html>
